<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>DH-Blog管理系统</title>
		<link rel="stylesheet" type="text/css" href="../css/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/animations.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header" style="color: #fff;">
				<a href="./">
					<div class="layui-logo" style="background-color: rgba(0,0,0,.05);">
						<h1>DH-Blog</h1>
					</div>
				</a>
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item"><a href="javascript:turnItemBtn();" class="layui-icon item-btn">&#xe668;</a></li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item"><a href="">博客首页</a></li>
					<li class="layui-nav-item"><a href="">退出系统</a></li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black" id="side">
				<div class="layui-side-scroll">
					<div class="head-img">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-img">
							<strong>Danyhug</strong>
						</a>
					</div>
					<hr class="layui-bg-gray">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-this">
							<a href="./index.html"><i class="layui-icon layui-icon-console"></i>仪表盘</a>
						</li>
						<li class="layui-nav-item">
							<a href="./edit.html"><i class="layui-icon layui-icon-add-1"></i>博客发布</a>
							<!-- 	          <dl class="layui-nav-child">
	            <dd><a href="javascript:;">列表一</a></dd>
	            <dd><a href="javascript:;">列表二</a></dd>
	            <dd><a href="">超链接</a></dd>
	          </dl> -->
						</li>
						<li class="layui-nav-item"><a href="./blogsetting.html"><i class="layui-icon layui-icon-util"></i>博客管理</a></li>
						<li class="layui-nav-item"><a href="./usersetting.html"><i class="layui-icon layui-icon-user"></i>账户设置</a></li>
						<li class="layui-nav-item"><a href="./systemconfig.html"><i class="layui-icon layui-icon-set"></i>系统配置</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body" id="body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;position: relative;">
					<fieldset class="layui-elem-field">
						<legend>仪表盘</legend>
						<div class="layui-field-box">

							<!-- 总归纳 -->
							<div class="content">
								<div class="content-items layui-bg-blue">
									<div class="content-items-left">
										<strong>16</strong>
										<small>文章</small>
									</div>
									<div class="content-items-right layui-icon">
										&#xe663;
									</div>
									<div class="content-items-more">
										<a href="">
											更多<i class="layui-icon layui-icon-right"></i>
										</a>
									</div>
								</div>
								<div class="content-items layui-bg-green">
									<div class="content-items-left">
										<strong>106</strong>
										<small>评论</small>
									</div>
									<div class="content-items-right layui-icon">
										&#xe63a;
									</div>
									<div class="content-items-more">
										<a href="">
											更多<i class="layui-icon layui-icon-right"></i>
										</a>
									</div>
								</div>
								<div class="content-items layui-bg-orange">
									<div class="content-items-left">
										<strong>22</strong>
										<small>标签</small>
									</div>
									<div class="content-items-right layui-icon">
										&#xe66e;
									</div>
									<div class="content-items-more">
										<a href="">
											更多<i class="layui-icon layui-icon-right"></i>
										</a>
									</div>
								</div>
								<div class="content-items layui-bg-red">
									<div class="content-items-left">
										<strong>6</strong>
										<small>分类</small>
									</div>
									<div class="content-items-right layui-icon">
										&#xe656;
									</div>
									<div class="content-items-more">
										<a href="">
											更多<i class="layui-icon layui-icon-right"></i>
										</a>
									</div>
								</div>
							</div>

							<div class="center-content">
								<!-- 系统情况 -->
								<div class="system">
									<p class="title">系统情况</p>
									<div class="center-content-system-items">
										<p class="name">操作系统:</p>
										<p>Linux</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">CPU型号:</p>
										<p>AMD Ryzen 7 4800U</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">Go版本:</p>
										<p>1.5.31</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">博客版本:</p>
										<p>1.0.0</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">Redis版本:</p>
										<p>5.5.6.1</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">数据库版本:</p>
										<p>Mysql 5.5.6.1</p>
									</div>
									<div class="center-content-system-items">
										<p class="name">CPU占用:</p>
										<div class="progess">
											<div class="progess-bar layui-anim-loop" style="width: 64%;">
												<div class="progess-bar-text">64%/100%</div>
											</div>
										</div>
									</div>
									<div class="center-content-system-items">
										<p class="name">内存消耗:</p>
										<div class="progess">
											<div class="progess-bar layui-anim-loop" style="width: 70%;">
												<div class="progess-bar-text">716.8MB/1024MB</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 最新评论 -->
								<div class="comment">
									<p class="title">最新评论</p>
									<a href="">
										<more>更多>></more>
									</a>
									<div class="center-content-comment">
										<ul>
											<li>
												<a href="javascript:;"><img src="http://q1.qlogo.cn/g?b=qq&nk=153669225&s=100" alt="" class="headimg turn360"></a>
												<div class="clear comment-left">
													<div>
														<h4>Danyhug</h4>
													</div>
													<small>快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐快乐中秋快乐</small>
												</div>
												<div class="clear comment-right">
													<i class="layui-icon layui-icon-time"></i>
													2020-10-12
												</div>
											</li>

											<li>
												<a href="javascript:;"><img src="http://q1.qlogo.cn/g?b=qq&nk=2715528996&s=100" alt="" class="headimg turn360"></a>
												<div class="clear comment-left">
													<div>
														<h4>测试账号</h4>
													</div>
													<small>你快乐吗/Are you ok?</small>
												</div>
												<div class="clear comment-right">
													<i class="layui-icon layui-icon-time"></i>
													2020-06-12
												</div>
											</li>

											<li>
												<a href="javascript:;"><img src="http://q1.qlogo.cn/g?b=qq&nk=1250616517&s=100" alt="" class="headimg turn360"></a>
												<div class="clear comment-left">
													<div>
														<h4>测试账号1</h4>
													</div>
													<small>你快乐吗/Are you ok?</small>
												</div>
												<div class="clear comment-right">
													<i class="layui-icon layui-icon-time"></i>
													2020-06-12
												</div>
											</li>

											<li>
												<a href="javascript:;"><img src="http://q1.qlogo.cn/g?b=qq&nk=3295800469&s=100" alt="" class="headimg turn360"></a>
												<div class="clear comment-left">
													<div>
														<h4>测试账号2</h4>
													</div>
													<small>你快乐吗/Are you ok?</small>
												</div>
												<div class="clear comment-right">
													<i class="layui-icon layui-icon-time"></i>
													2020-06-12
												</div>
											</li>

											<li>
												<a href="javascript:;"><img src="http://q1.qlogo.cn/g?b=qq&nk=2076103221&s=100" alt="" class="headimg turn360"></a>
												<div class="clear comment-left">
													<div>
														<h4>测试账号3</h4>
													</div>
													<small>你快乐吗/Are you ok?</small>
												</div>
												<div class="clear comment-right">
													<i class="layui-icon layui-icon-time"></i>
													2020-06-12
												</div>
											</li>
										</ul>
									</div>
								</div>
								<!-- 登录历史 -->
								<div class="loginHistory">
									<p class="title">登录历史</p>
									<a href="">
										<more>更多>></more>
									</a>
									<table class="layui-table" lay-skin="" style="margin-top: 2px; letter-spacing: 1px;">
										<colgroup>
											<col width="33.3%">
											<col width="33.3%">
											<col width="33.3%">
										</colgroup>
										<thead>
											<tr>
												<th>登录地</th>
												<th>登录时间</th>
												<th>登录IP</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>河北省-唐山市-曹妃甸区</td>
												<td>2020-11-7 18:00</td>
												<td>60.2.27.136</td>
											</tr>
											<tr>
												<td>河北省-张家口市</td>
												<td>2021-01-01 00:00</td>
												<td>192.16.0.1</td>
											</tr>
											<tr>
												<td>河北省-张家口市-桥东区</td>
												<td>2021-01-01 00:00</td>
												<td>172.22.16.222</td>
											</tr>
											<tr>
												<td>河北省-张家口市-桥西区</td>
												<td>2021-01-01 00:00</td>
												<td>127.0.0.1</td>
											</tr>
											<tr>
												<td>美国-洛杉矶</td>
												<td>2021-01-01 00:00</td>
												<td>1.1.1.1</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!-- 数据图表 -->
								<div class="chart">
									<p class="title">数据图表</p>
									<div class="layui-tab layui-tab-card" style="margin-top: 0;">
										<ul class="layui-tab-title">
											<li class="layui-this chart-btn" onclick="resizeChart(1);">24小时访问量</li>
											<li class="chart-btn" onclick="resizeChart(2);">网站总访问量</li>
											<li class="chart-btn" onclick="resizeChart(3)">文章访问量</li>
											<li class="chart-btn" onclick="resizeChart(4)">文章评论数</li>
										</ul>
										<div class="layui-tab-content" style="height: 600px;">
											<!-- 24小时访问量 -->
											<div class="layui-tab-item chart-info layui-show" id="website-visit24">

											</div>
											<!-- 网站总访问量 -->
											<div class="layui-tab-item chart-info" id="website-visit">

											</div>
											<!-- 文章访问量 -->
											<div class="layui-tab-item chart-info" id="article-visit">

											</div>
											<!-- 文章评论数 -->
											<div class="layui-tab-item chart-info" id="comment-count">

											</div>
										</div>
									</div>
								</div>

							</div>

						</div>
					</fieldset>
				</div>
				<!-- 主体内容结束 -->
			</div>

			<div class="layui-footer" id="footer">
				<!-- 底部固定区域 -->
				© BH-Blog
			</div>
		</div>
		<script src="../css/layui/layui.js"></script>
		<script src="../js/public.js"></script>
		<script src="../js/echarts/echarts.min.js"></script>
		<script src="../js/echarts/charts.js"></script>
		<script>
			//JavaScript代码区域
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>
	</body>
</html>
